從前端傳輸檔案到後端可以透過兩種形式：

1. base64的格式 (ios, android不支援)
2. FormData

今天要跟大家介紹的就是FormData是什麼～～

FormData 是什麼？

一種Object，前端傳送給後端資料的一種形式。FromData 可以讓前端利用 javaScritp 模擬表單來傳送資料給後端。

FormData 與 檔案處理

FormData的一個特點是可以傳送二進制檔案（File、Blob)，因此可以應用在前端與後端的檔案傳輸。

怎麼建立 FormData

Way1. 透過html的form

<form id="sampleForm">
    <input type="text" >  
</form>
<script>
    const target = document.getElementById('sampleForm');
    let fd = new FormData(target)
</script>

Way2. 透過js建立

let fd = new FormData();

查看FormData的內容

因為FormData基本上就是一個物件，所以會有key,value值

let object = {};
fd.forEach((val, key) => {
  object[key] = val;
});
console.log(object)

如何透過FormData傳輸檔案給後端

step1. 將檔案內容加入FormData

因為FormData基本上就是一個物件，所以在傳輸的時候也是會需要給一組key,value。並且使用append將數值加入FormData。

let blob = 檔案內容
let fd = new FormData();
fd.append('name', blob);

step2. 透過API傳輸給後端時，因為是ＦormData所以記得把header指定為multipart/form-data(這邊以axios為例)

 axios.post(apiUrl, fd, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});